<template>
	<view style="">
		<view class="status_bar" style="background-color: #ffffff; position: fixed;z-index: 1000;"></view>
		<!-- 顶部 tab切换与搜索条  -->
		<u-sticky :customNavHeight="statusHeight">
			<u-navbar bgColor='#fff' :fixed="false" titleStyle='color:#000;font-size:32rpx;font-weight:bold;'
				@leftClick="backpage">
				<template #center>
					<u-tabs @click="tabChange" :list="navlist" lineWidth="29" lineHeight="3" lineColor='#2F6DFE'
						:activeStyle="{ 
								color: '#2F6DFE',
								fontWeight: 'bold', 
								fontSize:'36rpx'
							}" :inactiveStyle="{
								color: '#3B3E45',
								fontSize:'36rpx',	
							}" :current="comtype===2?0:1"></u-tabs>
				</template>
			</u-navbar>
			<view class="search-wrap" style="position: relative;">
				<!-- 选类型模块 -->
				<view>
					<view class="search-wrap-select" @click="togglePopup('method')"
						:class="{active:pickerMethod===true}">
						{{method===1?'按业务':'按名称'}}
						<u-icon name="arrow-down" color="#333" size="18" top="3"></u-icon>
					</view>
					<u-picker :show="pickerMethod" :columns="methodList" :defaultIndex="[method===1?0:1]"
						@cancel="closePickMethod" @close="closePickMethod" @confirm="confirmPickMethod"
						:closeOnClickOverlay="true"></u-picker>
				</view>
				<view class="search-input">
					<u--input type="text" v-model="keyword" confirmType="search" :maxlength="25" :clearable="true"
						placeholderStyle="color: #333" :placeholder="placeholderText" border="none"
						@input="getAutocompleteList()" @confirm="toSearchList()" @blur="clearAutocompleteList"
						@focus="isHeight = true">
					</u--input>
					<!--
							搜索下拉：
							按业务：下拉接口同用户中心顶部接口
							按名称：同企情分析中的搜索下拉接口
						 -->

					<scroll-view class="search-history" v-show="AutocompleteList.length" :scroll-top="searchScrollTop"
						style="top:60rpx;left:0;" scroll-y="true" @scroll="searchScroll">
						<view class="history-list" v-for="(word,index) in AutocompleteList" :key="index"
							@tap.stop="searchByCompleteKeyWord(word.title)" @touchmove="clearListTimeStatus">
							<text v-html="Completeheighthtml(keyword,word.title)" class="hot-list_item"></text>
						</view>
					</scroll-view>
				</view>
				<u-icon color="#525252" size="22" name="search" @click="toSearchList()"></u-icon>

			</view>
		</u-sticky>

		<!-- 历史搜索 -->
		<view class="search-history_wrap" v-show="initHistoryList.length > 0">
			<view class="search-history_top">
				<view class="search-history_left">
					历史搜索
				</view>
				<view class="search-history_right">
					<u-icon name="/static/tuoke_delete.png" size="34rpx" @click="clickDele"></u-icon>
				</view>
			</view>
			<view class="search-history_cell">
				<view class="history_list" v-for="(item, index) in initHistoryList.slice(0,10)" :key="index"
					@click="toSearchList(item)">{{item}}</view>
			</view>
		</view>

		<!-- 热门搜索 -->
		<view class="search-history_wrap">
			<view class="search-history_top">
				<view class="search-history_left search-hot_text">
					热门搜索
				</view>
			</view>
			<view class="search-history_cell">
				<view class="hot_list" v-for="(item, index) in hotList.slice(0,10)" :key="index"
					@click="toSearchList(item)">{{item.length > 10 ? item.slice(0, 10) + '...' : item }}</view>
			</view>
		</view>

		<!-- 删除弹框 -->
		<u-modal :show="isshowDele" :content='deleText' :showCancelButton="true" cancelColor="#ADB4C2"
			confirmColor="#333333" :buttonReverse="true" @confirm="clickConfirm" @cancel="clickCancel"></u-modal>
	</view>
</template>

<script>
	import AutocompleteTuoke from '@/mixins/AutocompleteTuoke.js'
	export default {
		mixins: [AutocompleteTuoke],
		data() {
			//const vals_mc = uni.getStorageSync('MchistoryList')
			//const vals_yw = uni.getStorageSync('YwhistoryList')
			return {
				location: '11402',
				initHistoryList: [],
				statusHeight: 0,
				navlist: [{
					name: '找业主'
				}, {
					name: '查供应'
				}],
				// 企业类型	int	Y	1：代理；2：业主；4/5：供应商
				comtype: 2,
				// 查询方式	int	Y	1：按业务；2：按名称
				method: 1,
				// 搜索类型
				methodList: [
					['按业务', '按名称']
				],
				pickerMethod: false,
				// 电梯
				keyword: '',
				searchOverKeyword: '',
				// navIndex: 0,
				hotList: [],
				isshowDele: false,
				deleText: '是否清除当前搜索记录'
			};
		},
		computed: {
			placeholderText() {
				if (this.method ===2) {
					return '输入企业或机构完整名称，增加准确性'
				} else {
					if (this.comtype === 2) {
						return '或产品搜索甲方业主'
					}else{
						return '或产品搜索乙方供应商'
					}
					
				}
			}
		},
		watch: {
			// 'initHistoryList': {
			// 	handler(a, b) {
			// 		console.log(a)
			// 		if (JSON.stringify(a) !== JSON.stringify(b)) {
			// 			if (a.length > 0) {
			// 				//this.keyword = a[0]
			// 			}
			// 		}
			// 		setTimeout(() => {
			// 			this.initHistoryList = a
			// 		}, 100)
			// 	},
			// 	deep: true,
			// 	immediate: false,
			// }
		},
		onLoad(options) {
			const vals_mc = uni.getStorageSync('MchistoryList')
			const vals_yw = uni.getStorageSync('YwhistoryList')
			if (this.method == 1) {
				this.initHistoryList = uni.getStorageSync('YwhistoryList') || []
			} else {
				this.initHistoryList = uni.getStorageSync('MchistoryList') || []
			}
			this.hotKeywords()
			
			if(options.from === 'type'){
				this.togglePopup('method')
			}
		},
		methods: {
			togglePopup(val) {
				this.pickerMethod = !this.pickerMethod;
			},
			backpage() {
				uni.navigateBack({
					delta: 1,
				});
			},

			toSearchList(keys) {
				if (keys) {
					this.keyword = keys;
				}
				this.saveKeyList()
			},

			saveKeyList() {
				const val = this.keyword;
				const methodVal = this.method;

				// 不用判空，默认搜索电梯
				// if(!val){
				// 	uni.$u.toast('搜索关键词不能为空')
				// 	return
				// }
				
				


				const ishas = this.initHistoryList.findIndex((cur) => {
					return cur === val
				})
				if (ishas !== -1) {
					const filteredList = this.initHistoryList.filter(item => item !== val);
					console.log(filteredList)
					//this.initHistoryList.unshift(val)
					this.initHistoryList = [val, ...filteredList];
				} else {
					this.initHistoryList.unshift(val)
					if (this.initHistoryList.length >= 10) {
						this.initHistoryList = this.initHistoryList.slice(0, 10)
					}
				}


				if (methodVal === 2) {
					uni.setStorageSync('MchistoryList', this.initHistoryList)
				} else {
					uni.setStorageSync('YwhistoryList', this.initHistoryList)
				}

				uni.navigateTo({
					url: '/pages/tuoke/tuoke-result?keyword=' + this.keyword + '&method=' + methodVal +
						'&comtype=' + this.comtype
				})

			},
			closePickMethod() {
				this.pickerMethod = false;
			},
			confirmPickMethod(data) {
				this.method = data.indexs[0] + 1
				this.pickerMethod = false;
				if (this.method == 1) {
					this.initHistoryList = uni.getStorageSync('YwhistoryList')||[]
				} else {
					this.initHistoryList = uni.getStorageSync('MchistoryList')||[]
				}

				this.hotKeywords()
			},
			tabChange(val) {
				// if (val === this.navIndex) return
				// this.navIndex = val.index;

				if (val.index == 0) {
					this.comtype = 2
				} else {
					this.comtype = 4
				}

				this.hotKeywords()
			},

			searchByCompleteKeyWord(keyword) {
				this.keyword = keyword;
				this.AutocompleteList = [];
				this.toSearchList();

			},

			// 热搜关键词
			hotKeywords() {

				if (this.method == 1) {
					this.getYwHotKeywords()
				} else {
					this.getMcHotKeywords()
				}
			},
			getYwHotKeywords() {
				uni.$u.http
					.post('search/GetKeywordsRelatedHandler.ashx', {
						location: this.location,
						keywords: this.keyword,
					})
					.then(rs => {
						const {
							xgGjc,
						} = rs;
						this.hotList = xgGjc;
					})
			},
			getMcHotKeywords() {
				uni.$u.http
					.post('/analysis/Company/GetHotSearchListHandler.ashx', {
						location: this.location,
						ltype: this.navIndex, //默认为 0业主搜索 1供应商搜索 2代理搜索
					})
					.then(rs => {
						const data = rs.list || [];
						this.hotList = data;
					})
			},
			clickDele() {
				this.isshowDele = true
			},
			clickConfirm() {
				if (this.method === 1) {
					uni.removeStorageSync('YwhistoryList')
				} else {
					uni.removeStorageSync('MchistoryList')
				}
				this.initHistoryList = []
				this.isshowDele = false
			},

			clickCancel() {
				this.isshowDele = false
			},

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f5f7fa;
	}

	.search-wrap {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 23rpx 27rpx;
		z-index: 1;
		position: relative;
		margin: 27rpx 20rpx;
		border-radius: 8rpx;

		&-select {
			display: flex;
			align-items: center;
			border-right: 1px solid #999CA4;
			padding-right: 25rpx;

			&.active {
				color: #2F6DFE;
			}

			view {
				margin-left: 6rpx;
				margin-bottom: 6rpx;
			}
		}
	}

	.search-input {
		padding-left: 25rpx;
		flex: 1;
		position: relative;
	}

	.search-history_wrap {
		padding-top: 30rpx;
		margin: 0 27rpx;

		.search-history_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.search-history_left {
			font-size: 32rpx;
		}

		.search-history_right {}

		.search-history_cell {
			margin-top: 26rpx;
			display: flex;
			flex-wrap: wrap;

			.history_list {
				height: 60rpx;
				background: #EFEFEF;
				border-radius: 8rpx;
				padding: 0 17rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 60rpx;
				margin-right: 20rpx;
				margin-bottom: 25rpx;
			}

			.hot_list {
				height: 60rpx;
				background: #EAF0FF;
				border-radius: 8rpx;
				padding: 0 17rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 60rpx;
				margin-right: 20rpx;
				margin-bottom: 25rpx;
			}
		}

		.search-hot_text {
			color: #2F6DFE;
		}
	}
</style>